<!-- 地图工具 -->
<template>
  <div class="tool">
    <div class="zoom">{{ SettingStore.zoom }}</div>
    <div class="zoom_const">
      <div class="add box" @click="handlerAdd">+</div>
      <div class="reduce box" @click="handlerReduce">-</div>
    </div>
  </div>
</template>
<script setup lang='ts'>

const $emit = defineEmits(['setZoom'])

import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
//  地图层级增加
const handlerAdd = () => {
  SettingStore.zoom++
  if (SettingStore.zoom >= 21) {
    SettingStore.zoom = 20
    return
  }
  $emit('setZoom')
}
//  地图层级减少
const handlerReduce = () => {
  SettingStore.zoom--
  if (SettingStore.zoom <= 5) {
    SettingStore.zoom = 6
    return
  }
  $emit('setZoom')
}
</script>

<style scoped lang="scss">
.tool {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;

  .zoom {
    font-size: 18px;
    text-align: center;
    padding: 10px;
    background-color: #FFF;
    border-radius: 5px;
  }

  .zoom_const {
    margin-top: 10px;
    background-color: #FFF;
    border-radius: 5px;

    .box {
      font-size: 26px;
      padding: 6px 10px;
      text-align: center;
      cursor: pointer;

      &:last-child {
        border-top: 1px solid #999;
      }
    }
  }
}
</style>